<template>
  <div class="pager">
    <el-pagination :current-page="page" :page-size="limit"
                   layout="total, prev, pager, next, jumper" :total="total"
                   @size-change="onSizeChange" @current-change="onCurrentChange" />
  </div>
</template>

<script setup>
const emits = defineEmits(['current-change', 'size-change'])
const props = defineProps(['page', 'total', 'limit'])

const onCurrentChange = (val) => {
  emits('current-change', val)
}
const onSizeChange = (val) => {
  emits('size-change', val)
}
</script>

<style scoped lang="scss">
.pager {
  padding: 30px 0 10px 0;
}
.el-pagination {
  margin: 0;

  :deep(.el-pager) {
    li {
      width: 30px;
      height: 30px;
      margin: 0 10px;
      color: #606266;

      &.is-active {
        background-color: var(--color-primary);
        color: #fff;
      }
    }
  }

  :deep(.btn-prev::after) {
    content: '上一页';
  }
  :deep(.btn-next::after) {
    content: '下一页';
  }

  :deep(button):hover {
    color: var(--color-primary);
  }
}
</style>
